<template>
	<el-card>
		<el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabChange">
			<el-tab-pane label="待处理" name="1" lazy>
				<Todo ref="todoRef"></Todo>
			</el-tab-pane>
			<el-tab-pane label="已处理" name="2" lazy>
				<Processed ref="processedRef"></Processed>
			</el-tab-pane>
		</el-tabs>
	</el-card>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import Todo from './todo.vue'
import Processed from './processed.vue'

const activeName = ref('1')
const todoRef = ref()
const processedRef = ref()

const tabChange = e => {
	activeName.value = e
	switch (parseFloat(e)) {
		case 1:

			todoRef.value.resets()
			break
		case 2:

			processedRef.value.resets()
			break
	}
}

onMounted(() => {
	nextTick(() => {
		activeName.value = '1'
	})
})
</script>
<style lang="scss" scoped></style>
